<template>
    <div class="enterPay-view">

      <el-dialog
        :visible.sync="dialogVisible"
        width="700px"
        :show-close="close"
        :before-close="handleClose">
        <template>

          <div class="content">

            <div class="modelView">

              <div class="model-item" :class="selectIndex == 1 ? 'activete':''" @click="modelClick(1)">

                <div class="model-header orange">

                  <span>专业版</span>

                  <div class="desc" v-if="selectIndex == 1">
                    <img src="../../assets/img/login/select_icon.png">
                  </div>

                </div>

                <div class="model-center">

                  <div class="function-item">
                    <span>挂号管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>收费管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>门诊管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>药品管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>模版管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>诊所管理</span>
                    <i class="el-icon-check"></i>
                  </div>


                </div>

                <div class="model-footer">

                  <span>720元/年</span>

                </div>

              </div>

              <div class="model-item" :class="selectIndex == 2 ? 'activete':''" @click="modelClick(2)">

                <div class="model-header red">

                  <span>豪华版</span>

                  <div class="desc" v-if="selectIndex == 2">
                    <img src="../../assets/img/login/select_icon.png">
                  </div>
                </div>

                <div class="model-center">

                  <div class="function-item">
                    <span>挂号管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>收费管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>门诊管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>药品管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>模版管理</span>
                    <i class="el-icon-check"></i>
                  </div>

                  <div class="function-item">
                    <span>诊所管理</span>
                    <i class="el-icon-check"></i>
                  </div>


                </div>

                <div class="model-footer">

                  <span>980元/年</span>

                </div>

              </div>

            </div>

            <div class="other-select-view">

              <div class="select-item">
                <p class="select-title">选择时长</p>


                <el-radio-group v-model="yearRadio" @change="yearChange">
                  <el-radio label="1" >1年</el-radio>
                  <el-radio label="2">2年</el-radio>
                  <el-radio label="3">3年</el-radio>
                </el-radio-group>
              </div>

<!--              <div class="select-item">-->
<!--                <p class="select-title">支付方式</p>-->

<!--                <el-radio-group v-model="payType" @change="typeChange">-->
<!--                  <el-radio label="1">微信</el-radio>-->
<!--                  <el-radio label="2">支付宝</el-radio>-->
<!--                </el-radio-group>-->

<!--              </div>-->

              <div class="select-item">
                <p class="select-title">支付金额</p>

                <p class="price">{{total.toFixed(2)}}</p>
                <p>元</p>
              </div>

            </div>

            <div class="codeView">
              <div>
                <img :src="ali_QRCode">

                <div class="titleTxt">
                  <img src="../../assets/img/login/zhifubao_icon.png">
                  <p class="aliTxt">支付宝支付</p>
                </div>
              </div>

              <div>
                <img :src="wx_QRCode">

                <div class="titleTxt">
                  <img src="../../assets/img/login/weixin_icon.png">
                  <p class="wxTxt">微信支付</p>
                </div>
              </div>
            </div>

          </div>

        </template>
      </el-dialog>

    </div>
</template>

<script>
  import {payRenew} from "../../api/common";
  import Templates from "../clinicManagement/index";
    export default {
        name: "enterPay",
        components: {Templates},
        data:function () {
            return{
                close:false,
                dialogVisible:false,
                selectIndex:1,
                yearRadio:"1",
                payType:'1',
                total:720,
                ali_QRCode:'',
                wx_QRCode:'',
            }
        },
        mounted:function(){

        },
        methods:{
            getWXData:function(){
                let data = {
                    years:this.yearRadio,
                    pay_type:"1",
                    standard:this.selectIndex
                }
                payRenew(data).then((res)=>{
                    if (res.code == 200){
                        this.wx_QRCode = 'data:image/png;base64,' + res.data;
                    }else {
                        this.$message.error(res.msg)
                    }
                })
            },
            getAliData:function(){
                let data = {
                    years:this.yearRadio,
                    pay_type:"2",
                    standard:this.selectIndex
                }
                payRenew(data).then((res)=>{
                    if (res.code == 200){
                        this.ali_QRCode = 'data:image/png;base64,' + res.data;

                    }else {
                        this.$message.error(res.msg)
                    }
                })
            },
            open:function(){
                this.dialogVisible = true;
                this.getWXData()
                this.getAliData()
                this.dealTotal();
            },
            handleClose:function (done) {

            },
            modelClick:function (index) {
                this.selectIndex = index;
                this.getWXData()
                this.getAliData()
                this.dealTotal();
            },
            yearChange:function () {
                this.getWXData()
                this.getAliData()
                this.dealTotal();
            },
            typeChange:function () {
                this.getWXData()
                this.getAliData()
                this.dealTotal();
            },
            dealTotal:function () {
                let price = this.selectIndex == 1 ? 720 : 980
                this.total = price*Number(this.yearRadio)
            }
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/login/enterPay.scss";
</style>
